import React, { useState, useEffect } from 'react';
import { Form, App } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Input, PasswordInput } from '../../components/common/Input';
import { Button } from '../../components/common/Button';
import { Card } from '../../components/common/Card';
import { authService, TokenManager } from '../../services';
import './LoginPage.css';

interface LoginFormValues {
  username: string;
  password: string;
}

export const LoginPage: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const { message } = App.useApp();

  // 检查是否是会话过期跳转
  useEffect(() => {
    const expired = searchParams.get('expired');
    if (expired === 'true') {
      message.warning('会话已过期，请重新登录');
    }
  }, [searchParams, message]);

  // 检查是否已经登录
  useEffect(() => {
    if (TokenManager.isAuthenticated()) {
      navigate('/dashboard');
    }
  }, [navigate]);

  const handleLogin = async (values: LoginFormValues) => {
    try {
      setLoading(true);
      const response = await authService.login(values.username, values.password, message);
      
      if (response?.data?.token) {
        message.success('登录成功，欢迎回来');
        navigate('/dashboard');
      }
    } catch (error) {
      message.error('登录失败，请检查用户名和密码');
      console.error('Login failed:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-container">
      {/* 简化的背景装饰 */}
      <div className="login-bg">
        <div className="bg-gradient"></div>
        <div className="bg-pattern"></div>
      </div>
      
      <div className="login-content">
        {/* 品牌区域 - 在桌面端显示 */}
        <div className="brand-section">
          <div className="brand-logo">
            <div className="logo-icon">
              <img src="/beria.png" alt="Beria Craft Beer" />
            </div>
            <h1 className="logo-title">贝利亚精酿</h1>
          </div>
          {/* <p className="brand-subtitle">专业精酿啤酒管理系统</p> */}
          <div className="brand-features">
            <div className="feature-item">
              <span className="feature-icon">🍺</span>
              <span>精酿啤酒管理</span>
            </div>
            <div className="feature-item">
              <span className="feature-icon">📊</span>
              <span>智能数据分析</span>
            </div>
            <div className="feature-item">
              <span className="feature-icon">⚡</span>
              <span>高效运营管理</span>
            </div>
          </div>
        </div>
        
        {/* 登录卡片 */}
        <div className="login-section">
          <Card className="login-card">
            <div className="login-header">
              {/* 移动端显示的Logo */}
              <div className="mobile-logo">
                <img src="/beria.png" alt="Beria" />
                <h2>贝利亚精酿</h2>
              </div>
              {/* <p className="login-subtitle">登录您的管理账户</p> */}
            </div>
            
            <Form<LoginFormValues> 
              onFinish={handleLogin} 
              layout="vertical"
              className="login-form"
              size="large"
            >
              <Form.Item
                name="username"
                rules={[{ required: true, message: '请输入用户名' }]}
              >
                <Input 
                  prefix={<UserOutlined />} 
                  placeholder="用户名" 
                  size="large" 
                  fullWidth
                />
              </Form.Item>
              
              <Form.Item
                name="password"
                rules={[{ required: true, message: '请输入密码' }]}
              >
                <PasswordInput 
                  prefix={<LockOutlined />} 
                  placeholder="密码" 
                  size="large" 
                  fullWidth
                />
              </Form.Item>
              
              <div className="login-actions">
                <a href="#" className="forgot-link">忘记密码？</a>
              </div>
              
              <Button 
                type="primary" 
                htmlType="submit" 
                size="large" 
                fullWidth 
                loading={loading}
                className="login-button"
              >
                {loading ? '登录中...' : '登录'}
              </Button>
            </Form>
          </Card>
        </div>
      </div>
    </div>
  );
};

export default LoginPage; 